<template>
  <div id="userManager">
    <a-input-search
      style="max-width: 300px; margin: 30px 10px"
      v-model:value="searchValue"
      placeholder="请输入用户名"
      enter-button
      @search="onSearch"
    />
    <a-table :columns="columns" :data-source="data" style="min-height: 500px">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'id'">
          {{ record.id }}
        </template>
        <template v-else-if="column.key === 'userAvatar'">
          <a-image
            :width="100"
            :src="record.userAvatar"
            style="height: 100px; width: 100px"
          />
        </template>
        <template v-else-if="column.key === 'userRole'">
          <div v-if="record.userRole === 'admin'">
            <a-tag color="green">管理员</a-tag>
          </div>
          <div v-else-if="record.userRole === 'user'">
            <a-tag color="blue">用户</a-tag>
          </div>
          <div v-else>
            <a-tag color="red">封禁</a-tag>
          </div>
        </template>
        <template v-else-if="column.key === 'createTime'">
          {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
        <template v-else-if="column.key === 'action'">
          <a-button
            type="primary"
            size="small"
            danger
            @click="doDelete(record.id)"
            >删除
          </a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import { SmileOutlined, DownOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";
import { deleteUser, searchUsers } from "@/api/user";
import { message } from "ant-design-vue";
import dayjs from "dayjs";

const columns = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "账号",
    dataIndex: "userAccount",
    key: "userAccount",
  },
  {
    title: "昵称",
    dataIndex: "userName",
    key: "userName",
  },
  {
    title: "头像",
    key: "userAvatar",
    dataIndex: "userAvatar",
  },
  {
    title: "用户简介",
    key: "userProfile",
    dataIndex: "userProfile",
  },
  {
    title: "用户角色",
    key: "userRole",
    dataIndex: "userRole",
  },
  {
    title: "创建时间",
    key: "createTime",
    dataIndex: "createTime",
  },
  {
    title: "操作",
    key: "action",
    dataIndex: "action",
  },
];

const data = ref([]);

const searchValue = ref("");

const onSearch = () => {
  fetchData(searchValue.value);
};

const fetchData = async (username = "") => {
  const res = await searchUsers(username);
  if (res.data.code === 0) {
    data.value = res.data.data || [];
    console.log(res);
  } else {
    message.error("查询出现异常，" + res.data.message);
  }
};

const doDelete = async (id: string) => {
  if (!id) {
    return;
  }
  const res = await deleteUser(id);
  if (res.data.data && res.data.code === 0) {
    message.success("删除成功");
  } else {
    message.error("删除失败");
  }
};
fetchData();
</script>
<style scoped>
#userManager {
}
</style>
